<!-- 区域选择 -->
<template>
  <div>
    <treeselect
      v-model="ids"
      :multiple="multiple"
      :options="treeData"
      :disable-branch-nodes="!multiple"
      :searchable="searchable"
      :normalizer="normalizer"
      :limit="limit"
      :flat="flat"
      :disabled="disabled"
      :limit-text="count => `+ ${count} `"
      :placeholder="$t(placeholder)"
      :value-consists-of="valueConsists"
      :append-to-body="true"
      :no-options-text="$t('NO_DATA')"
      :no-results-text="$t('NO_DATA')"
      :no-children-text="$t('NO_DATA')"
      clear-all-text=""
      clear-value-text=""
      @open="open"
    >
      <label
        slot="option-label"
        slot-scope="{ node }"
        class="custom_treeselect__label"
        :class="node.raw.regionType == 'REGION' ? queryClass : ''"
      >
        <div>{{ node.label }}</div>
      </label>
    </treeselect>
  </div>
</template>

<script>
  // :always-open="true"
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { mapGetters } from 'vuex'

  export default {
    name: 'DeviceTypeCascader',
    components: { Treeselect },
    props: {
      selectedIds: {
        type: Array,
        default: () => []
      },
      limit: {
        // 显示tags个数，默认显示2个
        type: Number,
        default: 2
      },
      clearable: {
        type: Boolean,
        default: true
      },
      multiple: {
        type: Boolean,
        default: false
      },
      dataName: {
        type: String,
        default: 'regionStationTree'
      },
      placeholder: {
        type: String,
        default: 'REGION_STATION'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      searchable: {
        type: Boolean,
        default: true
      },
      otherData: {
        type: Array,
        default: null
      },
      valueConsists: {
        type: String,
        default: 'ALL'
      },
      flat: {
        type: Boolean,
        default: false
      },
      queryClass: {
        // 为了选择dom元素
        type: String,
        default: ''
      }
    },
    data() {
      return {
        normalizer(node) {
          return {
            id: node.regionId,
            label: node.regionName,
            children: node.children
          }
        },
        ids: []
      }
    },
    computed: {
      ...mapGetters([
        'regionStationTree',
        'stationTree',
        'areaTree',
        'onlyRegionTree',
        'regionTree'
      ]),
      cascaderProps() {
        return {
          ...this.defaultProps,
          ...this.props
        }
      },
      treeData() {
        return this.otherData || this[this.dataName]
      }
    },
    watch: {
      selectedIds() {
        this.ids = this.multiple ? this.selectedIds : this.selectedIds[0] || null
      },
      ids(val) {
        // console.log(val)
        this.$emit('change', val || (this.multiple ? [] : null))
      }
    },
    created() {
      this.ids = this.multiple ? this.selectedIds : this.selectedIds[0]
    },
    methods: {
      open() {
        this.$emit('open')
      }
    }
  }
</script>

<style>
  .vue-treeselect--open-below .vue-treeselect__menu {
    top: 2px;
  }
  .vue-treeselect__option-arrow-container:hover .vue-treeselect__option-arrow,
  .vue-treeselect--branch-nodes-disabled
    .vue-treeselect__option:hover
    .vue-treeselect__option-arrow {
    color: #ccc;
  }
  .vue-treeselect--searchable.vue-treeselect--multi.vue-treeselect--has-value
    .vue-treeselect__input-container {
    padding-top: 0 !important;
  }
  .custom_treeselect__label {
    font-size: 14px;
  }
  .custom_treeselect__label div {
    line-height: 22px;
  }
</style>
